import ReactDOM from "react-dom/client";
import { Spin } from "antd";
import { LoadingOutlined } from "@ant-design/icons";

const antIcon = <LoadingOutlined style={{ fontSize: 48 }} spin />;

const loadingStyle = `
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  background-color: rgba(255, 255, 255, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
`;

//开启loading
export const startLoading = () => {
  const el = document.getElementById("page-global-loading-el");
  if(el) {
    return;
  }
  const dom = document.createElement("div");
  dom.id = "page-global-loading-el";
  dom.style = loadingStyle;
  document.body.appendChild(dom);
  ReactDOM.createRoot(dom).render(<Spin indicator={antIcon} tip="Loading..." />);
};

//结束loading
export const endLoading = () => {
  const el = document.getElementById("page-global-loading-el");
  if (el) {
    document.body.removeChild(el);
  }
};